<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			li a {
				float: right;
			}
		</style>
		<script>
			window.onload = function() {
				var oDiv1 = document.getElementById('div1');
				var aDiv1 = oDiv1.getElementsByTagName('div');
				var aBtn1 = aDiv1[0].getElementsByTagName('button');
				var oUl1 = aDiv1[0].getElementsByTagName('ul');

				aBtn1[0].onclick = function() {
					alert(oUl1[0].childNodes.length)
				}

				aBtn1[1].onclick = function() {
					for(var i = 0; i < oUl1[0].childNodes.length; i++) {
						alert('共有' + oUl1[0].childNodes.length + '个节点，' + '当前节点的nodeType是' + oUl1[0].childNodes[i].nodeType)
					}
				}

				aBtn1[2].onclick = function() {
					for(var i = 0; i < oUl1[0].childNodes.length; i++) {
						if(oUl1[0].childNodes[i].nodeType == 1) {
							oUl1[0].childNodes[i].className = 'list-group-item list-group-item-info';
							if(i == 1) {
								alert('已操')
							}
						}
					}
				}

				var oUl2 = aDiv1[1].getElementsByTagName('ul');
				var aBtn2 = aDiv1[1].getElementsByTagName('button');
				aBtn2[0].onclick = function() {
					alert('共有' + oUl2[0].children.length + '个子节点');
				}
				aBtn2[1].onclick = function() {
					for(var i = 0; i < oUl2[0].children.length; i++) {
						oUl2[0].children[i].className = 'list-group-item list-group-item-info';
					}
				}
				var oDiv2 = document.getElementById('div2');
				var aDiv2 = oDiv2.getElementsByTagName('div');
				var aBtn3 = oDiv2.getElementsByTagName('button');
				var oUl3 = oDiv2.getElementsByTagName('ul');
				var aA2 = oDiv2.getElementsByTagName('a');
				aBtn3[0].onclick = function() {
					alert(aA2[0].parentNode)
				}
				aBtn3[1].onclick = function() {
					for(var i = 0; i < oUl3[0].children.length; i++) {
						oUl3[0].children[i].style.display = 'block';
						this.style.display = 'none';
					}
				}
				for(var i = 0; i < aA2.length; i++) {
					aA2[i].onclick = function() {
						this.parentNode.style.display = 'none';
						aBtn3[1].style.display = 'inline';
					}
				}
			}
		</script>
	</head>

	<BODY>
		<pre>
			<h1>JAVAscript练习</a></h1>
			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=137947039&site=qq&menu=yes" class="right"><img border="0" src="http://wpa.qq.com/pa?p=2:137947039:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
		</pre>
		<div id="div1" class="box box-re form-inline">
			1、DOM节点 子节点<br><br>
			<div class="box box-re">
				例1：子节点 childNodes & nodeType<br><br>
				<ul class="list-group">
					<li class="list-group-item">子节点1</li>
					<li class="list-group-item">子节点2</li>
				</ul>
				<button class="btn btn-info">子节点个数</button> <code>childNodes.length</code> 实际有2个li，但给出的结果是5。是因为childNodes把空的文本节点也算进去了。<br><br>
				<button class="btn btn-info">判断节点类型</button> <code>childNodes.nodeType</code> 当nodeType等于3，说明是个文本节点，等于1，说明是个元素节点。<br><br>
				<button class="btn btn-info">操作子节点</button> 判断子节点类型是否等于1，如果等于1则改class。<br><br>
			</div>
			<div class="box box-re">
				例2：子节点 children<br><br>
				<ul class="list-group">
					<li class="list-group-item">子节点1</li>
					<li class="list-group-item">子节点2</li>
				</ul>
				<button class="btn btn-info">子节点个数</button> <code>children.length</code><br><br>
				<button class="btn btn-info">操作子节点</button> <code>childern.className</code>
			</div>
		</div>

		<div id="div2" class="box box-re">
			2、DOM节点 父节点<br><br>
			<div class="box box-re">
				例1：父节点 parentNode<br><br>
				<button class="btn btn-info">查看'隐藏'的父节点</button> <button class="btn btn-info">显示ul子节点</button><br><br>
				<ul class="list-group">
					<li class="list-group-item">子节点1
						<a href="javascript:;">隐藏</a>
					</li>
					<li class="list-group-item">子节点2
						<a href="javascript:;">隐藏</a>
					</li>
					<li class="list-group-item">子节点3
						<a href="javascript:;">隐藏</a>
					</li>
					<li class="list-group-item">子节点4
						<a href="javascript:;">隐藏</a>
					</li>
					<li class="list-group-item">子节点5
						<a href="javascript:;">隐藏</a>
					</li>
				</ul>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>什么是DOM：</b>DOM是JS组成部分之一，而且有自己得规范。其实就是document，所有js对页面的操作都是通过document来进行的。</p>
			<p><b>DOM节点：</b>标签（CSS）、元素（JS）、节点（DOM），说的其实是一个东西，叫法不同而已。</p>
			<p><b>浏览器支持DOM的程度：</b>FF（火狐）对于他的兼容性是99%，IE（IE6-8）能支持到10%，IE9可以到99%，Chrome可以达到60%。</p>
			<p><b>节点类型：</b>文本节点：<code>内容</code>，元素节点：<code>< span >内容< / span ></code>。</p>
			<p><b>子节点：</b>只计算第一层的标签。</p>
			<p><b>childNodes：</b>包括文本节点与元素节点。</p>
			<p><b>nodeType：</b>获取节点类型。</p>
			<p><b>children：</b>只包括元素节点,不包括文本节点，也不必使用nodeType来判断。</p>
			<p><b>父节点：</b>parentNode、offsetParent（获取元素用于定位的那个父级）</p>
		</div>

	</BODY>

</HTML>